<template>
  <div class="echarts-demo">

    <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
    <div id="chart" ref="chart" style="width: 500px; height: 500px"></div>
    <div id="chart2" ref="chart2" style="width:680px;height:520px"></div>
    <el-date-picker
        v-if="isShow"
        style="width: 140px;position: absolute;left: 60%"
        @change="upTime"
        v-model="currentDate"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
    </el-date-picker>
    <el-select v-if="isShow" style="width: 140px;position: absolute;left: 51%" v-model="type" @change="upTest" placeholder="请选择">
      <el-option label="周分布" value="week"></el-option>
      <el-option label="年分布" value="year"></el-option>
      <el-option label="季度分布" value="quarter"></el-option>
    </el-select>
    <div style="float: left;margin-top: 30%" v-if="isShow">

      <br>
      <el-button @click="setColumnar" type="primary" size="mini">柱状图</el-button>
      <br>
      <el-button @click="setPolyline" type="success" size="mini">折线图</el-button>
      <br>
      <el-button @click="setPie" type="danger" size="mini">饼状图</el-button>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import {getStatistics1,getStatistics2} from "../../network/admin"
export default {
  name: "dashboard",
  data() {
    return {
      type:'week',
      isShow:false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      currentDate:'',
      chart: null,
      chart2:null,
      chartData:[
        { value: 0, name: "学生" },
        { value: 0, name: "高校" },
        { value: 0, name: "企业" }
      ],
      chart2Data:[
        {value:'',name:''}
      ],
    };
  },
  computed:{
    chartValue(){
      let new_arr =this.chart2Data.map(obj => {return obj.num})
      return new_arr;
    },
    chartName(){
      let new_arr=this.chart2Data.map(obj=>{return obj.date})
      console.log(new_arr)
      return new_arr
    },
    getWeek(){
      let new_arr=this.chart2Data.map(obj=>{return obj.week})
      console.log(new_arr)
      return new_arr
    },
    values(){
      return this.chartData
    },
    pieValues(){
      let new_arr=[]
     this.chart2Data.map(((item,index)=>{
       new_arr.push(Object.assign({},item,{name:item.date,value:item.num}))
     }))
      console.log(new_arr)
      return new_arr
    }
  },
  created() {
    getStatistics1()
        .then(res=>{
          console.log(res)
          let data=res.data.extend
          console.log(Object.values(data))
          let values=Object.values(data)
          for (let i in this.chartData){
            this.chartData[i].value=values[i]
          }
          console.log(this.chartData)
          this.setPie1()
        })


    this.currentDate=new Date()
    getStatistics2(this.getTime(this.currentDate),this.type)
        .then(res=>{
          console.log(res)
          this.chart2Data=res.data.extend.list
          this.chart2Data.reverse()
          this.isShow=true
          this.setPolyline()
        })
  },
  methods:{
    upTest(type){
        getStatistics2(this.getTime(this.currentDate),type)
            .then(res=>{
              console.log(res)
              if(type=='quarter'){
                let map=res.data.extend.map
                let i=0
                this.chart2Data=[{num:'',date:''},{num:'',date:''},{num:'',date:''},{num:'',date:''},]
                for(let key in map){
                  this.chart2Data[i].num=map[key]
                  this.chart2Data[i].date=key
                  i++
                  this.setPolyline()
                }
                console.log(this.chart2Data)
                console.log("你好")
              }else if(type=='year'){
                let map=res.data.extend.map
                let i=0
                this.chart2Data=[{num:'',date:''},{num:'',date:''},{num:'',date:''},{num:'',date:''},{num:'',date:''}]
                for(let key in map){
                  this.chart2Data[i].num=map[key]
                  this.chart2Data[i].date=key
                  i++
                  this.setColumnar()
                }
              }
              else {
                this.chart2Data=res.data.extend.list
                this.chart2Data.reverse()
                this.setPolyline()
              }

            })


    },
    upTime(){
      this.upTest(this.type)
    },
    getTime(date){
      return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
    },
    setPolyline(){
      this.chart2.setOption({
        title: {
          text: "活跃分布图",
          subtext: "实时数据",
          right:100
        },
        xAxis: {
          show:true,
          type: 'category',
          data: this.chartName
        },
        yAxis: {
          show:true,
          type: 'value'
        },
        series: [{
          data: this.chartValue,
          type: 'line'
        }]
      })
    },
    setColumnar(){
      this.chart2.setOption({
        title: {
          text: "最近一周活跃分布",
          subtext: "实时数据",
          right:100
        },
        xAxis: {
          show:true,
          type: 'category',
          data: this.chartName
        },
        yAxis: {
          show:true,
          type: 'value'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} '
        },
        series: [{

          name:'活跃度',
          data: this.chartValue,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      })
    },
    setPie(){
      this.chart2.setOption({
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 30,
          right:100,
          data: this.chartName
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        xAxis: {
          show:false
        },
        yAxis: {
          show: false
        },
        series: [
          {

            name: "人数",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: this.pieValues
          }
        ]
      })
    },
    setPie1(){
      this.chart.setOption({
        title: {
          text: "入驻类型人数",
          subtext: "实时数据",
          left: "center"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ["学生", "高校", "企业"]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {  roseType: 'angle',
            name: "人数",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: this.values
          }
        ]
      });
    }

  },
  mounted() {
    // [3] 基于准备好的 DOM，初始化 Echarts 实例
    // 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
    this.chart = echarts.init(this.$refs.chart,'light');
    this.chart2=echarts.init(this.$refs.chart2,'light')
    // [4] 设置 Echarts 图表数据





  }
};
</script>

<style>
#chart2,#chart{
  float: left;
}
</style>
